import { useContext } from 'react';
import { Link } from 'react-scroll';

import { ModalContext } from '@/shared/context/ModalContext';
import { Modal } from '@/shared/ui';

import { useNavItems } from '../lib';
import cs from './NavModal.module.scss';

export const NavModal = ({ onClose }: { onClose: () => void }) => {
  const { closeModal } = useContext(ModalContext);
  const navItems = useNavItems();
  return (
    <Modal className={cs.modal} isOpen onCloseClick={onClose}>
      <nav className={cs.nav}>
        {Object.keys(navItems).map((id) => (
          <Link className={cs.navItem} duration={500} key={id} onClick={closeModal} smooth spy to={id}>
            {navItems[id as keyof typeof navItems]}
          </Link>
        ))}
      </nav>
    </Modal>
  );
};
